import React, { useState, useCallback, useMemo } from 'react';
import {
    Box,
    Flex,
    Button,
    FormControl,
    Input,
    Textarea,
    ModalFooter,
    ModalBody,
    Image,
    useTheme
} from '@chakra-ui/react';
import { useFieldArray, useForm } from 'react-hook-form';
import { AppSchema } from '@fastgpt/global/core/app/type.d';
import { useToast } from '@/web/common/hooks/useToast';
import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
import { compressImgFileAndUpload } from '@/web/common/file/controller';
import { getErrText } from '@fastgpt/global/common/error/utils';
import { useRequest } from '@/web/common/hooks/useRequest';
import Avatar from '@/components/Avatar';
import MyModal from '@/components/MyModal';
import { useAppStore } from '@/web/core/app/store/useAppStore';
import PermissionRadio from '@/components/support/permission/Radio';
import { useTranslation } from 'next-i18next';
import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
import EditForm from './EditForm';
import { useSticky } from '@/web/common/hooks/useSticky';


const InfoModal = ({
    defaultApp,
    onClose,
    onSuccess
}: {
    defaultApp: AppSchema;
    onClose: () => void;
    onSuccess?: () => void;
}) => {
    const { t } = useTranslation();
    const { toast } = useToast();
    const { updateAppDetail } = useAppStore();
    const { parentRef, divRef, isSticky } = useSticky();
    const theme = useTheme();

    const { File, onOpen: onOpenSelectFile } = useSelectFile({
        fileType: '.jpg,.png',
        multiple: false
    });
    const {
        register,
        setValue,
        getValues,
        formState: { errors },
        handleSubmit
    } = useForm({
        defaultValues: defaultApp
    });
    const [refresh, setRefresh] = useState(false);

    const BoxStyles = {
        px: 5,
        py: '16px',
        borderBottomWidth: '1px',
        borderBottomColor: 'borderColor.low'
  };
    // 提交保存模型修改
    const { mutate: saveSubmitSuccess, isLoading: btnLoading } = useRequest({
        mutationFn: async (data: AppSchema) => {
            await updateAppDetail(data._id, {
                name: data.name,
                avatar: data.avatar,
                intro: data.intro,
                permission: data.permission
            });
        },
        onSuccess() {
            onSuccess && onSuccess();
            onClose();
            toast({
                title: '更新成功',
                status: 'success'
            });
        },
        errorToast: '更新失败'
    });

    // 提交保存表单失败
    const saveSubmitError = useCallback(() => {
        // deep search message
        const deepSearch = (obj: any): string => {
            if (!obj) return '提交表单错误';
            if (!!obj.message) {
                return obj.message;
            }
            return deepSearch(Object.values(obj)[0]);
        };
        toast({
            title: deepSearch(errors),
            status: 'error',
            duration: 4000,
            isClosable: true
        });
    }, [errors, toast]);

    const saveUpdateModel = useCallback(
        () => handleSubmit((data) => saveSubmitSuccess(data), saveSubmitError)(),
        [handleSubmit, saveSubmitError, saveSubmitSuccess]
    );

    const onSelectFile = useCallback(
        async (e: File[]) => {
            const file = e[0];
            if (!file) return;
            try {
                const src = await compressImgFileAndUpload({
                    type: MongoImageTypeEnum.appAvatar,
                    file,
                    maxW: 300,
                    maxH: 300
                });
                setValue('avatar', src);
                setRefresh((state) => !state);
            } catch (err: any) {
                toast({
                    title: getErrText(err, '头像选择异常'),
                    status: 'warning'
                });
            }
        },
        [setValue, toast]
    );


    return (
        <MyModal
            isOpen={true}
            onClose={onClose}
            iconSrc="/imgs/module/ai.svg"
            title={t('core.app.setting')}
            w={600}
        >
            <ModalBody ref={parentRef}>
                <Flex
                    ref={divRef}
                    position={'sticky'}
                    top={-4}
                    bg={'myGray.25'}
                    py={4}
                    justifyContent={'space-between'}
                    alignItems={'center'}
                    zIndex={10}
                    px={4}
                    {...(isSticky && {
                        borderBottom: theme.borders.base,
                        boxShadow: '0 2px 10px rgba(0,0,0,0.12)'
                    })}
                >
                    <Flex alignItems={'center'}>
                        <Box fontSize={['md', 'xl']} color={'myGray.800'}>
                            基础信息
                        </Box>
                    </Flex>
                    <Button
                        size={['sm', 'md']}
                        variant={'primary'}
                        isLoading={btnLoading} 
                        onClick={saveUpdateModel}
                
                    >
                        保存
                    </Button>
                </Flex>
                <Box px={4}>

                    <Box bg={'white'} borderRadius={'md'} borderWidth={'1px'} borderColor={'borderColor.base'}>
                       <Box  {...BoxStyles}> 

                       <Box>头像 & 名称</Box>
                        <Flex mt={2} alignItems={'center'}>
                            <Avatar
                                src={getValues('avatar')}
                                w={['26px', '34px']}
                                h={['26px', '34px']}
                                cursor={'pointer'}
                                borderRadius={'md'}
                                mr={4}
                                title={'点击切换头像'}
                                onClick={() => onOpenSelectFile()}
                            />
                            <FormControl>
                                <Input
                                    bg={'myWhite.600'}
                                    placeholder={'设置一个名称'}
                                    {...register('name', {
                                        required: '展示名称不能为空'
                                    })}
                                ></Input>
                            </FormControl>
                        </Flex>
                        <Box mt={4} mb={1}>
                            应用介绍
                        </Box>
                        {/* <Box color={'myGray.500'} mb={2} fontSize={'sm'}>
            该介绍主要用于记忆和在应用市场展示
          </Box> */}
                        <Textarea
                            rows={4}
                            maxLength={500}
                            placeholder={'给你的 AI 应用一个介绍'}
                            bg={'myWhite.600'}
                            {...register('intro')}
                        />
                        {/* <Box mt={4}>
          <Box mb={1}>{t('user.Permission')}</Box>
          <PermissionRadio
            value={getValues('permission')}
            onChange={(e) => {
              setValue('permission', e);
              setRefresh(!refresh);
            }}
          />
        </Box> */}
                       </Box>
                    </Box>
                </Box>

                <Box mt={2}>
                    <EditForm divRef={divRef} isSticky={isSticky} />
                </Box>

            </ModalBody>
{/* 
            <ModalFooter>
                <Button variant={'whiteBase'} mr={3} onClick={onClose}>
                    取消
                </Button>
                <Button isLoading={btnLoading} onClick={saveUpdateModel}>
                    保存
                </Button>
            </ModalFooter> */}

            <File onSelect={onSelectFile} />
        </MyModal>
    );
};

export default React.memo(InfoModal);
